<template>
  <Card>
    <Table :columns="columns" :data="dataList" style="margin-top: 10px;"></Table>
    <div class="page">
      <Page :total="pageTotal" :page-size="pageSize" :current="pageNum"  @on-change="changePage"></Page>
    </div>
    <Modal v-model="goodModal">
      <p slot="header">
        <span>商品信息</span>
      </p>
      <Form :label-width="100">
        <FormItem label="商品编号：">
          <span>{{good.id}}</span>
        </FormItem>
        <FormItem label="商品名称：">
          <span>{{good.name}}</span>
        </FormItem>
        <FormItem label="商品单价：">
          <span>{{good.price}}</span>
        </FormItem>
        <FormItem label="商品版本：">
          <span>{{good.version}}</span>
        </FormItem>
        <FormItem label="商品描述：">
          <span>{{good.description}}</span>
        </FormItem>
        <FormItem label="商品备注：">
          <span>{{good.note}}</span>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="goodModal = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="applyModal">
      <p slot="header">
        <span>供货信息</span>
      </p>
      <Form ref="apply" :model="apply" :rules="applyRules" :label-width="100">
        <FormItem prop="zoneId" label="物业：">
          <Select v-model="apply.zoneId">
            <Option v-for="zone in zones" :key="zone.id" :value="zone.id">{{zone.zoneName}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="level" label="供货等级：">
          <Select v-model="apply.level">
            <Option :value="1">1级</Option>
            <Option :value="2">2级</Option>
            <Option :value="3">3级</Option>
            <Option :value="4">4级</Option>
            <Option :value="5">5级</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="saveLoading" @click="saveApply">保存</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
  export default {
    name: "apply",
    data() {
      return {
        // 页码
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 页总数
        pageTotal: 0,
        // 厂商id
        factoryId: null,
        // 表数据
        dataList: [],
        // 表头
        columns: [
          {
            title: "编号",
            key: "id"
          }, {
            title: "商品名称",
            key: "goodName",
            render: ((h, params) => {
              return h('div', [
                h('span', null, params.row.good.name)
              ])
            })
          }, {
            title: "物业名称",
            key: "zoneName",
            render: ((h, params) => {
              return h('div', [
                h('span', null, params.row.zone.zoneName)
              ])
            })
          }, {
            title: "信用等级",
            key: "level",
            render: ((h, params) => {
              return h('div', [
                h('span', null, params.row.level + "级")
              ])
            })
          }, {
            title: "操作",
            key: "action",
            width: 250,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.goodModal = true;
                      this.good = params.row.good;
                    }
                  }
                }, '查看商品'),
                h('Button', {
                  props: {
                    type: 'info'
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.applyModal = true;
                      // 重置按钮加载状态
                      this.saveLoading = false;
                      // 重置表单
                      this.$refs['apply'].resetFields();
                      this.apply = {
                        id: params.row.id,
                        zoneId: params.row.zoneId,
                        money: params.row.money,
                        level: params.row.level,
                      };
                    }
                  }
                }, '修改')
              ])
            }
          }
        ],
        // 商品模态框
        goodModal: false,
        // 商品信息
        good: {
          id: null,
          name: "",
          price: 0.00,
          version: "",
          description: "",
          note: "",
        },
        saveLoading: false,
        // 供货模态框
        applyModal: false,
        apply: {
          id: null,
          zoneId: null,
          money: 0.00,
          level: null,
        },
        applyRules: {
          zoneId: [
            {required: true, message: "物业不能为空", trigger: 'blur', type: "number"}
          ],
          level: [
            {required: true, message: "信用等级不能为空", trigger: 'blur', type: "number"}
          ]
        },
        zones: []
      }
    },
    methods: {
      // 翻页
      changePage (pageNo) {
        // 更改当前页
        this.pageNum = pageNo;
        // 重新获取数据
        this.getApplies();
      },
      // 获取当前登录厂商信息
      getFactory(callback) {
        this.$requests.get("/factory/get", null).then(res => {
          if (res.data.code === 0) {
            this.factoryId = res.data.data.id;
          }
          if (callback) {
            callback();
          }
        })
      },
      // 获取供货意向
      getApplies() {
        this.$requests.get("/apply/getApplies", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          factoryId: this.factoryId
        }).then(res => {
          if (res.data.code === 0) {
            this.dataList = res.data.data.list;
            this.pageTotal = res.data.data.total;
            this.pageNum = res.data.data.pageNum;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      getZones() {
        this.$requests.get("/zone/getAll").then(res => {
          if (res.data.code === 0) {
            this.zones = res.data.data;
          }
        })
      },
      // 保存供货意向
      saveApply() {
        this.$refs["apply"].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.apply.factoryId = this.factoryId;
            this.$requests.post("/apply/save", this.apply).then(res => {
              if (res.data.code === 0) {
                this.$Message.success("供货意向保存成功");
                this.getApplies();
                this.applyModal = false;
              } else {
                this.saveLoading = false;
                this.$Message.error(res.data.msg);
              }
            })
          }
        })
      }
    },
    created() {
      this.getFactory(() => {
        this.getApplies();
      });
      this.getZones();
    }
  }
</script>

<style lang="less" scoped>
  .page {
    margin-top: 10px;
    text-align: right;
  }
</style>
